<template>
  <div class="my-doctors-container">
    <!--我的医生 头部-->
    <div class="header">
      <span class="back-icon" @click="goback()"> < </span>
      <span class="title">我的医生</span>
    </div>
    <!-- 选项卡 -->
    <div class="tabs">
      <span class="tab" :class="{ active: isConsultedTab }" @click="toggleTab('consulted')">
        咨询过
      </span>
      <span class="tab" :class="{ active: isFollowedTab }" @click="toggleTab('followed')">
        已关注
      </span>
    </div>
    <!-- 内容 -->
    <div class="content">
      <!-- 根据选中的标签显示相应内容 -->
      <div v-if="isConsultedTab">
        <div v-if="consultedDoctors.length === 0">
          <img src="../../img/doc.png" alt="" />
          <p>暂无医生</p>
          <p>咨询过的医生将显示在这里</p>
          <button class="btn" @click="find()">去找医生</button>
        </div>
        <ul v-else>
          <!-- 这里循环显示咨询过的医生列表 -->
          <li v-for="doctor in consultedDoctors" :key="doctor.id">
            {{ doctor.name }}
          </li>
        </ul>
      </div>
      <div v-if="isFollowedTab">
        <div v-if="followedDoctors.length === 0">
          <img src="../../img/doc.png" alt="" />
          <p>暂无医生</p>
          <p>关注过的医生将显示在这里</p>
          <button class="btn" @click="find()">去找医生</button>
        </div>
        <ul v-else>
          <!-- 这里循环显示已关注的医生列表 -->
          <li v-for="doctor in followedDoctors" :key="doctor.id">
            {{ doctor.name }}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const isConsultedTab = ref(true)
const isFollowedTab = ref(false)
const consultedDoctors = ref([])
const followedDoctors = ref([])
const toggleTab = (tab) => {
  if (tab === 'consulted') {
    isConsultedTab.value = true
    isFollowedTab.value = false
  } else if (tab === 'followed') {
    isConsultedTab.value = false
    isFollowedTab.value = true
  }
}
const goback = () => {
  router.go(-1)
}
const find = () => {
  router.push({ path: '/wDoctor' })
}
</script>

<style scoped>
.my-doctors-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.header {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 20px;
}
.back-icon {
  padding: 10px;
  cursor: pointer;
}
.title {
  text-align: center;
  flex: 1;
  padding: 10px;
  cursor: pointer;
}
.tabs {
  display: flex;
  justify-content: space-around;
  width: 100%;
  margin-bottom: 20px;
}
.tab {
  padding: 10px 20px;
  cursor: pointer;
}

.active {
  border-bottom: 2px solid green;
}

.content {
  text-align: center;
  padding: 1rem;
}
.btn {
  background-color: green;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  margin: 1.5rem;
}
</style>
